<template>
	<view class="peak-valley-peak-month-setting">
		<site-basic-cell :name="siteName"></site-basic-cell>
		<view class="setting-form">
			<view class="setting-form-header">
				<text class="setting-form-title">{{$t('peak.valley.peak.month.setting.title')}}</text>
				<text class="setting-form-btn"
					@tap="selected = []">{{ $t('peak.valley.peak.month.setting.reset.btn')}}</text>
			</view>
			<view class="months">
				<view v-for="item in 12" class="month" :class="{ 'month--selected': selected.includes(item) }"
					@tap="handleSelect(item)">
					<text
						class="month__label">{{ i18Replace($t('peak.valley.peak.month.setting.unit'), { x: item }) }}</text>
				</view>
			</view>
		</view>

		<publish-footer @publish="handlePublish"></publish-footer>
	</view>
</template>

<script setup>
	import {
		ref, watch
	} from 'vue';

	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		selectPeakMonths,
		setPeakMonths
	} from '../../apis/components/siteSet';

	const siteName = ref(null);
	const siteId = ref(null);
	import {
		useI18n
	} from "vue-i18n";
	import {
		i18Replace
	} from '../../utils/functions';

	const {
		t
	} = useI18n();
	onLoad(({
		name,
		id
	}) => {
		siteName.value = name;
		siteId.value = id;
	})

	const selected = ref([]);

	const handleSelect = (month) => {
		const idx = selected.value.findIndex(item => item === month);
		if (idx !== -1) {
			selected.value.splice(idx, 1);
		} else {
			selected.value.push(month);
		}
	}

	const handlePublish = async () => {
		try {
			await setPeakMonths({
				peakMonthsList: selected.value,
				siteId: siteId.value
			});
			uni.navigateBack()
			uni.$u.toast(t('site.parameter.settings.publish.successful'))
		} catch (err) {
			uni.$u.toast(typeof err === "string" ? err : err.message)
		}
	}
	
	const loadData = async () => {
		const {data} = await selectPeakMonths(siteId.value);
		selected.value = data?.peakMonthsList || [];
	}
	
	watch(() => siteId.value, now => {
		if (now) {
			loadData();
		}
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	.peak-valley-peak-month-setting {
		padding: 24rpx 32rpx;

		.setting-form {
			margin-top: 24rpx;
			border-radius: 16rpx;
			background-color: #132034;
			padding: 40rpx 32rpx;

			&-header {
				@include flex(row);
				justify-content: space-between;
				align-items: center;

				text {
					// font-family: Alibaba PuHuiTi 3.0;
					font-size: 32rpx;
					line-height: 32rpx;
					letter-spacing: -0.045em;
				}
			}

			&-title {
				color: #BFBFBF;
			}

			&-btn {
				color: #FC7C00;
			}
		}

		.months {
			margin-top: 30rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 26rpx 20rpx;

			.month {
				background: #222D49;
				border-radius: 8rpx;
				text-align: center;
				padding: 18rpx;

				&__label {
					// font-family: Alibaba PuHuiTi 3.0;
					font-size: 28rpx;
					line-height: 28rpx;
					letter-spacing: -0.045em;
					color: #fff;
				}

				&--selected {
					background: #64B7F6;
				}
			}
		}
	}
</style>